/**
 * Created by bjh on 2017/11/08.
 */

import React, { Component } from "react";
import "../index.less";
import GM from "g2-mobile";
import PropTypes from "prop-types";

//components
import Tooltip from "./toolTip.jsx";


export default class BasicChart extends Component {
	constructor(props) {
		super(props);
		this.state = {
			width: document.body.clientWidth,
			height: 130 * 2,
			margin: [50, 60, 80, 25],
			xAxisFontSize: 40,
			id: "chart" + Math.random(100),
		};

		this.chart = null;
	}

	componentDidMount() {
		if (document.body.clientWidth > 750) {
			this.setState({
				xAxisFontSize: 50
			});
		}
		this.renderChart();

	}

	renderChart() {
		const { width, height, margin, configFunc, chartData } = this.props
		const chart = new GM.Chart({
			id: this.state.id,
			width: width || this.state.width,
			height: height || this.state.height,
			margin: margin || this.state.margin,
		})
		configFunc(chart)
		this.chart = chart;
	}

	render() {
		let { width, height, margin, chartData, useTooltip } = this.props
		return (
			<div className="chart-contrainer">
				<canvas id={this.state.id} width={width || this.state.width - 110} height={height || this.state.height}>
				</canvas>
				{
					this.chart && useTooltip ?
						<Tooltip
							margin={margin}
							data={chartData}
							chart={this.chart}
						/> : null
				}
			</div>
		)
	}
}

BasicChart.defaultProps = {
	useTooltip: true,
	zereVisible: false,
}

BasicChart.propTypes = {
	useTooltip: PropTypes.bool,
	zereVisible: PropTypes.bool,
}